<template>
  <div>
    <!-- 顶部 -->
    <div class="dingbu">
      <div style="margin-bottom: 10px">
        <van-nav-bar title="" left-arrow>
          <template #left>
            <van-icon name="arrow-left" size="24" color="#000" />
          </template>
          <template #right>
            <van-icon name="comment-o" size="20" color="#000" />
          </template>
        </van-nav-bar>
      </div>
      <div class="head">
        <div class="touxiang">
          <img
            src="https://img1.qunarzz.com/ucenter/headshot/1806/5c/0269c45dfc1070ba.png_r_150x150_c675f637.png"
            alt=""
          />
        </div>
        <div style="margin: 5px 0 0 10px; position: relative">
          <p style="font-size: 18px">去哪儿用户</p>
          关注 0 &emsp;|&emsp;粉丝 0
        </div>
        <div style="position: absolute; right: 10px; top: 76px">个人主页 ></div>
      </div>
    </div>
    <!-- 购物车 -->
    <div class="gouwuche">
      <span>我的购物车</span>
      <span>></span>
    </div>
    <!-- 订单 -->
    <div class="dingdan">
      <div
        style="
          line-height: 30px;
          width: 95%;
          height: 30px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
        "
      >
        <span>我的度假订单</span>
        <span>全部 ></span>
      </div>
      <ul
        style="display: flex; justify-content: space-around; margin-top: 10px"
      >
        <li>
          <van-icon name="todo-list-o" size="30" /><br />
          <span>待付款</span>
        </li>
        <li>
          <van-icon name="after-sale" size="30" /><br />
          <span>待消费</span>
        </li>
        <li>
          <van-icon name="cash-o" size="30" /><br />
          <span>退款中</span>
        </li>
      </ul>
    </div>
    <div>
      <div class="youhui">
        <div style="display: flex; align-items: center; font-size: 14px">
          <van-icon name="coupon-o" size="18" />&emsp;
          <span>我的优惠券</span>
        </div>
        <div style="margin-top: 17px;">
          <span style="color: aqua;font-weight: 600;">0</span>&nbsp;
          <span>个可用优惠券 ></span>
        </div>
      </div>
      <div class="youhui">
        <div style="display: flex; align-items: center; font-size: 14px">
            <van-icon name="shop-collect-o" size="18"/>&emsp;
          <span>我的收藏</span>
        </div >
        <div style="margin-top: 17px;">
          <span style="color: aqua;font-weight: 600;">0</span>&nbsp;
          <span>个可用优惠券 ></span>
        </div>
      </div>
      <div class="youhui">
        <div style="display: flex; align-items: center; font-size: 14px">
            <van-icon name="star-o" size="18"/>&emsp;
          <span>我的订阅</span>
        </div>
      </div>
    </div>
    <div class="youhui">
        <div style="display: flex; align-items: center; font-size: 14px">
            <van-icon name="records-o" size="18"/>&emsp;
          <span>意见反馈</span>
        </div>
      </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.dingbu {
  width: 100%;
  height: 120px;
  background-image: url(https://ad-dapp-osscp.qunarzz.com/ad_dapp_oss_oper/2abecb345804fc9cac0c2cac4cd81515.png);
  background-size: 100%;
}
.touxiang {
  width: 60px;
  height: 60px;
  border: 3px solid #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
}
.touxiang > img {
  width: 90%;
  height: 90%;
}
.head {
  display: flex;
  padding-left: 20px;
}
.gouwuche {
  width: 90%;
  height: 40px;
  background-color: #e9fcfc;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 10px;
  line-height: 40px;
  font-size: 14px;
}
.dingdan {
  width: 90%;
  height: 110px;
  margin: 0 auto;
  /* background-color: #d3d3d3; */
  margin-top: 20px;
}
.youhui {
  width: 90%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
}

.van-nav-bar {
  background-color: transparent;
}
.van-nav-bar::after {
  border: none;
}
</style>